/**
 * 添加计划弹窗
 * @author xiaoxujs
 */

import { AutoComplete, DatePicker, Form, InputNumber, message, Modal, Select } from "antd";
import { FC, useState } from "react";
import { IPlanInsertPlanForm, IPlanInsertPlanParams } from "../../../../../type/planManagement";
import dayjs from "dayjs";
import { putPlanInsertPlan } from "../../../api";
import { ISelectList } from "../../../../../type/antd";

const { RangePicker } = DatePicker;

const AddPlanModule: FC<{
    open: boolean;
    handleCallback: () => void;
    goodsList: ISelectList[]
    transportNameList: ISelectList[]
}> = ({
    open,
    handleCallback,
    goodsList,
    transportNameList,
}) => {
        const [form] = Form.useForm<IPlanInsertPlanForm>();
        const { validateFields, resetFields } = form;
        const [filteredOptions, setFilteredOptions] = useState<any[]>([]);

        const handleSearch = (searchText: string) => {
            if (!searchText) {
            setFilteredOptions([]);
            } else {
            const results = transportNameList.filter((item) =>
                item.label.includes(searchText)
            );
            setFilteredOptions(results);
            }
        };
        const handleOk = async () => {
            const values = await validateFields();
            console.log(values);
            
            if (values&&values.date) {
                const params: IPlanInsertPlanParams = {   
                    ...values,
                    startDate: dayjs(values.date[0]).format('YYYY-MM-DD'),
                    stopDate: dayjs(values.date[1]).format('YYYY-MM-DD'),
                }
                const { code, msg } = await putPlanInsertPlan(params) as { code: number, msg: string };
                if (code === 20000) {
                    message.success('添加成功');
                    resetFields();
                    handleCallback();
                } else {
                    message.error(msg);
                }
            }else{
                message.error('请选择计划周期');
            }


        };

        const handleCancel = () => {
            resetFields();
            handleCallback()
        };
        return <Modal title="添加计划" open={open} onOk={handleOk} onCancel={handleCancel}>
            <Form
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 16 }}
                form={form}
            >
                <Form.Item<IPlanInsertPlanForm>
                    label="计划周期"
                    name="date"
                    rules={[{ required: true, message: '请选择!' }]}
                >
                    <RangePicker />
                </Form.Item>
                <Form.Item<IPlanInsertPlanForm>
                    label="货品"
                    name="goodsName"
                    rules={[{ required: true, message: '请选择!' }]}
                >
                    <Select 
                    placeholder="请选择货品"
                    style={{ width: '26.5rem' }} options={goodsList} showSearch />
                </Form.Item>
                <Form.Item<IPlanInsertPlanForm>
                    label="物流单位"
                    name="transportName"
                    rules={[{ required: true, message: '请输入!' }]}
                >
                    <AutoComplete
                        options={filteredOptions}
                        style={{ width: "26.5rem" ,fontSize: '1.2rem'}}
                        onSearch={(text) => handleSearch(text)}
                        placeholder="请输入单位名称"
                        dropdownStyle={{fontSize: '1.4rem'}}
                        />
                </Form.Item>
                <Form.Item<IPlanInsertPlanForm>
                    label="计划量（吨）"
                    name="planQuantity"
                    rules={[{ required: true, message: '请输入!' }]}
                >
                    <InputNumber 
                    placeholder="请输入计划量"
                    style={{ width: '26.5rem' }}  min={0}/>
                </Form.Item>
            </Form>
        </Modal>
    }

export default AddPlanModule;